<template>
  <div>
    <div class="demo">
      <vueMiniPlayer ref="vueMiniPlayer" :video="video" :mutex="true" @fullscreen="handleFullscreen" />
    </div>
  </div>
</template>

<script>


import {serverIp, serverPort} from "../../../public/config";

export default {
  name: "VideoDetail",
  data() {
    return {
      video: {
        url: '',
        cover: `http://${serverIp}:${serverPort}/file/188beb2936ab44118a182d6a960b9a03.jpeg`,
        muted: false,
        loop: false,
        preload: 'auto',
        poster: '',
        volume: 1,
        autoplay: false
      }
    }
  },
  methods: {
    handleFullscreen(){

    }
  },
  created() {
    let id = this.$route.query.id
    this.request.get("/file/detail/" + id).then(res => {
      console.log(res.data)

      this.video.url = res.data.url
    })
  }
}
</script>

<style scoped>

</style>